<script setup lang="ts">
  import { ref, reactive, watch, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { receiveDirectQuery } from '@/api/material-distribution';
  import { Notification } from '@arco-design/web-vue';

  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const emit = defineEmits(['updateArray', 'direDispatch']);
  const pageSize = ref<number>(10);
  const pageNumber = ref<number>(1);
  const rangeDate = ref<Date[]>([]);
  const formValues = reactive({
    productCode: '',
    aoCode: '',
    packageCode: '',
    itemCode: '',
    qualityCode: '',
    mProductNumber: '',
    batchNo: '',
    startPlaneNo: '',
    isSort: '',
    state: '',
    deliveryState: '',
    monthStartTime: '',
    monthEndTime: '',
    weekStartTime: '',
    weekEndTime: '',
    dailyStartTime: '',
    dailyEndTime: '',
    barcode: '',
  });
  const barCodeSacn = ref<any>();
  async function handleSearch() {
    const response = await receiveDirectQuery({
      searchParams: formValues,
      pageParameter: {
        page: pageNumber.value,
        rows: pageSize.value,
      },
    });
    if (response.retCode === '200') {
      emit('updateArray', response.responseBody);
    } else {
      Notification.error({
        title: '失败',
        content: response.message ? response.message : '查询失败',
        closable: true,
      });
    }
  }
  function reset() {
    Object.keys(formValues).forEach((key) => {
      (formValues as Record<string, any>)[key] = '';
    });
    rangeDate.value = [];
    setTimeout(() => {
      handleSearch();
    }, 150);
  }
  function direDispatch() {
    emit('direDispatch');
  }
  onMounted(() => {
    barCodeSacn.value.focus();
  });
  watch(rangeDate, () => {
    if (rangeDate.value && rangeDate.value.length >= 2) {
      formValues.monthStartTime = rangeDate.value[0].toString();
      formValues.monthEndTime = rangeDate.value[1].toString();
    }
  });
  // 监听分页
  watch([() => booleanStore.pageNum, () => booleanStore.pageSize], () => {
    if (booleanStore.num5 === 26) {
      pageNumber.value = booleanStore.pageNum;
      pageSize.value = booleanStore.pageSize;
      handleSearch();
    }
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">扫码区域</div>
    </template>
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="12">
        <a-input
          ref="barCodeSacn"
          v-model="formValues.barcode"
          placeholder="条码"
          size="large"
          @press-enter="handleSearch"
        />
      </a-col>
    </a-row>
  </a-card>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">日计划物料配套信息表</div>
    </template>
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="6">
        <a-input
          v-model="formValues.aoCode"
          placeholder="AO编码"
          size="large"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.packageCode"
          placeholder="工作包编码"
          size="large"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.itemCode"
          placeholder="图号"
          size="large"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.qualityCode"
          placeholder="质量编号"
          size="large"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.mProductNumber"
          placeholder="型号"
          size="large"
        />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.productCode"
          placeholder="机型"
          size="large"
        />
      </a-col>
      <a-col :span="6">
        <a-input v-model="formValues.batchNo" placeholder="批次" size="large" />
      </a-col>
      <a-col :span="6">
        <a-input
          v-model="formValues.startPlaneNo"
          placeholder="起始架次"
          size="large"
        />
      </a-col>
      <a-col :span="12">
        <a-range-picker v-model:model-value="rangeDate" />
      </a-col>
    </a-row>
    <div style="margin-top: 16px">
      <a-space>
        <a-button type="primary" size="large" @click="handleSearch">
          查询
        </a-button>
        <a-button size="large" @click="reset">重置</a-button>
        <a-button type="outline" size="large" @click="direDispatch"
          >直配</a-button
        >
      </a-space>
    </div>
  </a-card>
</template>

<style scoped>
  .arco-col-6 {
    margin-bottom: 16px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
</style>
